<template>
    <BaseECharts ref="echartsRef" height="300px"></BaseECharts>
</template>

<script setup lang="ts">
import type { ECOption } from '@/components/baseECharts/config'

import { BaseEchartsType } from '@/components/baseECharts/type'

const echartsRef = ref<BaseEchartsType>()
onMounted(() => {
    setOption()
})
const typeData = ['mate 70 Pro', 'Pura 70', '荣耀GT', 'nova 13', 'Neo7', 'iPhone 15']

const data = typeData.map((item) => ({ value: Math.random() * 1000, name: item }))

interface Point {
    x: number
    y: number
}

interface GraphicAnimationConfig {
    cx?: number
    cy?: number
    r1?: number
    r2?: number
    point1?: Point
    point2?: Point
    point3?: Point
    point4?: Point
    fill?: string
    stroke?: string
    lineWidth?: number
    pointRadius?: number
    duration?: number
}

// 饼图半径和位置
const pieRadius = ['35%', '50%']
const pieXY = ['50%', '55%']

// 自定义图形半径和位置
const customRadius = [0.6, 0.7]
const customXY = [0.5, 0.55]

// 旋转动画配置
const cx = 529 * customXY[0]
const cy = 300 * customXY[1]
const r1 = (300 / 2) * customRadius[0]
const r2 = (300 / 2) * customRadius[1]
const config: GraphicAnimationConfig = {
    cx,
    cy,
    r1,
    r2,
    point1: getCirclePoint(cx, cy, r1, 90),
    point2: getCirclePoint(cx, cy, r1, 270),
    point3: getCirclePoint(cx, cy, r2, 90),
    point4: getCirclePoint(cx, cy, r2, 270),
    fill: 'transparent',
    stroke: '#2473ef',
    lineWidth: 1.5,
    pointRadius: 4,
    duration: 10000,
}

const setOption = () => {
    const option: ECOption = {
        legend: {
            top: 'center',
            right: '1%',
            orient: 'vertical',
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
                color: '#fff',
                fontSize: 16,
            },
        },

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },

        graphic: [
            // 自定义左上角标题
            {
                type: 'group',
                children: (() => {
                    const img = new URL('../../../images/title-box-1.png', import.meta.url).href
                    const width = 127
                    const height = 39
                    const title = '型号占有率'
                    return [
                        {
                            type: 'text',
                            style: {
                                align: 'center',
                                verticalAlign: 'middle',
                                text: title,
                                width: width,
                                height: height,
                                lineHeight: height,
                                x: width / 2,
                                y: height / 2,
                                fontSize: 18,
                                fontWeight: 'bold',
                                fill: '#fff',
                                backgroundColor: {
                                    image: img,
                                },
                                textShadowBlur: 20,
                                textShadowColor: '#fff',
                            },
                        },
                    ]
                })(),
            },
            // 顺时针动画
            {
                type: 'group',
                keyframeAnimation: {
                    duration: config.duration,
                    loop: true,
                    keyframes: [
                        { percent: 0, rotation: Math.PI * 2, originX: config.cx, originY: config.cy, easing: 'linear' },
                        { percent: 1, rotation: 0, originX: config.cx, originY: config.cy, easing: 'linear' },
                    ],
                },
                children: [
                    {
                        type: 'arc',
                        shape: { cx: config.cx, cy: config.cy, r: config.r1, startAngle: toAngle(0), endAngle: toAngle(90) },
                        style: { fill: config.fill, lineWidth: config.lineWidth, stroke: config.stroke },
                    },
                    {
                        type: 'arc',
                        shape: { cx: config.cx, cy: config.cy, r: config.r1, startAngle: toAngle(180), endAngle: toAngle(270) },
                        style: { fill: config.fill, lineWidth: config.lineWidth, stroke: config.stroke },
                    },
                    {
                        type: 'circle',
                        shape: { cx: config.point1?.x, cy: config.point1?.y, r: config.pointRadius },
                        style: { fill: config.stroke },
                    },
                    {
                        type: 'circle',
                        shape: { cx: config.point2?.x, cy: config.point2?.y, r: config.pointRadius },
                        style: { fill: config.stroke },
                    },
                ],
            },
            // 逆时针动画
            {
                type: 'group',
                keyframeAnimation: {
                    duration: config.duration,
                    loop: true,
                    keyframes: [
                        { percent: 0, rotation: 0, originX: config.cx, originY: config.cy, easing: 'linear' },
                        { percent: 1, rotation: Math.PI * 2, originX: config.cx, originY: config.cy, easing: 'linear' },
                    ],
                },
                children: [
                    {
                        type: 'arc',
                        shape: { cx: config.cx, cy: config.cy, r: config.r2, startAngle: toAngle(270), endAngle: toAngle(40) },
                        style: { fill: config.fill, lineWidth: config.lineWidth, stroke: config.stroke },
                    },
                    {
                        type: 'arc',
                        shape: { cx: config.cx, cy: config.cy, r: config.r2, startAngle: toAngle(90), endAngle: toAngle(220) },
                        style: { fill: config.fill, lineWidth: config.lineWidth, stroke: config.stroke },
                    },
                    {
                        type: 'circle',
                        shape: { cx: config.point3?.x, cy: config.point3?.y, r: config.pointRadius },
                        style: { fill: config.stroke },
                    },
                    {
                        type: 'circle',
                        shape: { cx: config.point4?.x, cy: config.point4?.y, r: config.pointRadius },
                        style: { fill: config.stroke },
                    },
                ],
            },
        ],

        series: [
            // 饼图
            {
                name: '型号',
                type: 'pie',
                padAngle: 5,
                radius: pieRadius,
                center: pieXY,
                label: { show: false },
                data: data,
            },
            // 自定义中心标题
            {
                type: 'custom',
                tooltip: { show: false },
                coordinateSystem: 'none',
                renderItem: (params, api) => {
                    const cx = api.getWidth() * customXY[0]
                    const cy = api.getHeight() * customXY[1]
                    const text1 = '+10%'
                    const text2 = '同比昨日'
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'text',
                                style: {
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    text: text1,
                                    x: cx,
                                    y: cy - 10,
                                    fontSize: 26,
                                    fill: '#2473ef',
                                    fontWeight: 'bold',
                                },
                            },
                            {
                                type: 'text',
                                style: {
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    text: text2,
                                    x: cx,
                                    y: cy + 20,
                                    fontSize: 16,
                                    fill: '#fff',
                                },
                            },
                        ],
                    }
                },
                data: [0],
            },
        ],
    }
    echartsRef.value?.setOption(option)
}
</script>

<style lang="scss" scoped></style>
